<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import chatsApi from "@/api/charts.js";

const mainRef = ref();
const names = ref([]); // 用于存储 x 轴的标签
const values = ref([]); // 用于存储 y 轴的值

onMounted(() => {
  const myChart = echarts.init(mainRef.value);

  chatsApi.contestNum().then(result => {
    console.log(result);

    // 假设 result.data 是一个对象数组 [{ name: '竞赛A', value: 120 }, { name: '竞赛B', value: 200 }]
    names.value = result.data.map(item => item.name); // 提取 x 轴的标签
    values.value = result.data.map(item => item.value); // 提取 y 轴的值

    // 配置项
    const option = {
      title: {
        text: 'Referer of a Website',

        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: result.data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

    // 设置图表的配置项
    myChart.setOption(option);
  });
});
</script>

<template>
  <div ref="mainRef" style="height: 100%;"></div>
</template>

<style scoped>
/* 你可以在这里添加样式 */
</style>